<%@page import="com.sinodata.bsm.common.vo.RealTimeViewConf"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>

<%
    request.setAttribute("flashPath", request.getContextPath()+ "/resources/flash");
    JSONArray confis =(JSONArray)request.getAttribute("confis");
    String fristResTypeId = null;
    if(confis.size()>0){
        JSONObject object=(JSONObject)confis.get(0);
        fristResTypeId = object.get("resTypeId").toString().trim();
    }
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow:hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实时性能图</title>
<%@ include file="../include/common.jsp"%>
<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css"
	href="${flashPath}/history/history.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/real-time-view-custom.css" />
<link rel="stylesheet" media="all" type="text/css"
	href="${pageContext.request.contextPath}/style/default/tree/zTreeStyle.css" />
<link type="text/css"
	href="${pageContext.request.contextPath}/style/default/jqueryui/smoothness/jquery-ui-1.8.21.custom.css"
	rel="Stylesheet" />
<script type="text/javascript" src="${flashPath}/history/history.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/tree/jquery.ztree.all-3.1.min.js"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.core.js"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.widget.js"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.mouse.js"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.selectable.js"></script>

<!-- END Browser History required section -->
<script type="text/javascript" src="${flashPath}/swfobject.js"></script>
<script type="text/javascript">
	// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
	var swfVersionStr = "0.0.0";
	// To use express install, set to playerProductInstall.swf, otherwise the empty string. 
	var xiSwfUrlStr = "${flashPath}/playerProductInstall.swf";
	var flashvars = {};
	flashvars.flashPath = "${flashPath}";
	flashvars.reqPath = "${pageContext.request.contextPath}"
	flashvars.viewId ="-1";
	flashvars.resTypeId = "<%= fristResTypeId%>";
	var params = {};
	params.quality = "high";
	params.bgcolor = "#ffffff";
	params.allowscriptaccess = "sameDomain";
	params.allowfullscreen = "true";
	params.wmode = "transparent";
	var attributes = {};
	attributes.id = "RealTimeCustom";
	attributes.name = "RealTimeCustom";
	attributes.align = "middle";
	swfobject.embedSWF("${flashPath}/RealTimeCustom.swf", "flashContent",
			"100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params,
			attributes);
	// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
	//   swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
<script type="text/javascript">
	function changeRes(resId, resTypeId) {

		RealTimeCustom.displayRes(resId, resTypeId);
	}

	function isChanged() {
		
		var ret = false;
		try{
			RealTimeCustom.isChanged();
			}catch(e){
				alert(e.description);
			}
		return ret;
	}

	function changeBtn() {
		/**/

		var resId = $("#resText").val();
		var resType = $("#typeText").val();
		alert("changeRes(" + resId + "," + resType + ")");
		changeRes(resId, resType);
	}

	function showMenu() {
		
		if($("#menuContent").is(':hidden')){ //如果是隐藏
			$("#div1").attr("class","minus");
			$("#menuContent").show();
			var leftDiv = $("#leftDiv");
				var leftDivOffset = $("#leftDiv").offset();
				$("#menuContent").css({
					left : leftDivOffset.left + "px",
					top : leftDivOffset.top + "px"
				}).slideDown("fast");
				$("body").bind("mousedown", onBodyDown);
				
    	 }else{
    		 hideMenu();
     	}
	}

	function hideMenu(){
		 $("#div1").attr("class","add");
		 $("#menuContent").hide();
		 $("body").unbind("mousedown", onBodyDown);
	}
	
	function onBodyDown(event) {
		if (!(event.target.id == "div1" || event.target.id == "resTypeId"
				|| event.target.id == "menuContent" || $(event.target).parents(
				"#menuContent").length > 0)) {
			hideMenu();
		}
	}
	function onClick(e, treeId, treeNode) {
	
		var zTree = $.fn.zTree.getZTreeObj("resTypeTree"), nodes = zTree
				.getSelectedNodes(), v = "";
		if (nodes.length != 1) {
			return;
		}
		if (nodes[0].isParent) {
			zTree.expandNode(nodes[0]);
			return;
		}
		var resTypeId = nodes[0].id;
		selfFound = nodes[0].selfFound;
		
		var liList = $("#selectable li");
		var isExited = false;
		$.each(liList, function(index, obj) {
			if ($(obj).find("span").text() == resTypeId) {
				isExited = true;
				return false;
			}
		});
		hideMenu();
		if (!isExited) {
			$("#selectable").append(
					"<li class='ui-widget-content ui-selectee'>"
							+ nodes[0].name + "<span style='display: none;'>"
							+ nodes[0].id + "</span></li>");
		}
	}

	function scroll_down() {
		$("#selectable").animate({
			"top" : "-=50px"
		}, "fast");
	}

	function scroll_up() {
		if ($("#selectable").css('top') > '-50px') {
			$("#selectable").css('top', '0px');
		} else {
			$("#selectable").animate({
				"top" : "+=50px"
			}, "fast");
		}
	}

	var setting = {
		async : {
			enable : true,
			url : "../resource/res-type!typeTree.action",
			dataType : "text",
			autoParam : [ "id" ]
		},
		callback : {
			onClick : onClick
		},
		view : {
			dblClickExpand : false,
			showLine : false
		}
	};

	$(document).ready(function() {
		$.fn.zTree.init($("#resTypeTree"), setting);
		$("#selectable").selectable();
		$("#selectable").bind("selectableselected", function(event, ui) {
			if (isChanged()) {
				$(ui.selected).removeClass('ui-selected');
				event.stopPropagation();
				return false;
			}
			var resTypeId = $(ui.selected).children().first().text();
			changeRes(null, resTypeId);
		});

		$("#selectable").bind("selectableunselected", function(event, ui) {
			if (isChanged()) {
				getTopWin(window).getMessageBox().tip("请先保存或取消", '性能图已修改');
				$(ui.unselected).addClass('ui-selected');
				event.stopPropagation();
				return false;
			}
		});
	});
</script>
<script language="JavaScript" type="text/JavaScript">   
function toggle(targetid){    
    if (document.getElementById)    
 {    
        target=document.getElementById(targetid);    
            if (target.style.display=="block")    
   {    
               target.style.display="none";    
              var aaa  =document.all("aa");    
     var s='';    
               for(var i=0;i<aaa.length;i++)    
               {    
                 if (aaa[i].checked==true)    
                 {    
         s+=aaa[i].value;    
                 }    
            }    
               } else     
    {    
                target.style.display="block";    
             }    
     }    
}    
</script> 

</head>
<body class="over-h">
       <div style="width: 100%; height:100%">
		<div style="width:15%;vertical-align: top; height:100%; float:left">
			<div id="leftDiv" class="visitor_cp">
				<div class="mod_t_play">
					<h2 class="title-h2">
						<span>性能图定义</span>
								<div id="div1" class="add" onclick="showMenu();">	  </div>
					</h2>
				</div>
				<div style="height: 100%; overflow: hidden;">
					<ul id="selectable">
						<%
		        	   	 
		        	   	 for(int i=0;confis!=null&&i<confis.size();i++){
		        	   	 	JSONObject confi = (JSONObject)confis.get(i);
		        	   	%>
		        	   	<li class="ui-widget-content ui-selectee <% if(i==0){out.println("ui-selected");} %>"><%=confi.getString("resTypeName") %><span style="display: none;"><%=confi.getLong("resTypeId") %></span></li>
		        	   	<%
		        	   	 }
		        	    %>
					</ul>
				</div>
			</div>
		</div>
		<div style="height:100%; width:85%; float:left;">
			<div id="flashContent" class="flashContent">
				<p>To view this page ensure that Adobe Flash Player version
					11.3.0 or greater is installed.</p>
				<script type="text/javascript">
					var pageHost = ((document.location.protocol == "https:") ? "https://"
							: "http://");
					document
							.write("<a href='http://www.adobe.com/go/getflashplayer'>Get Adobe Flash player</a>");
				</script>
			</div>
		</div>
	</div>
	<div id="menuContent" class="menuContent"
		style="display: none; position: absolute;">
		<ul id="resTypeTree" class="ztree"
			style="margin-top: 20px; padding-left: 0; width: 200px; height: 520px;"></ul>
	</div>
</body>
</html>